<!-- 主要用于监控页面的大小状态,判断是否移动/电脑端 -->
<script lang="ts">
   import { defineComponent, toRefs, ref, unref } from 'vue';
   import { createAppProviderContext } from './useAppContext';
   import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
   import { prefixCls } from '/@/settings/designSetting';
   import { useAppStore } from '/@/store/modules/app';
   import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';

   const props = {
      /**
       * class style prefix
       */
      prefixCls: { type: String, default: prefixCls },
   };

   export default defineComponent({
      name: 'AppProvider',
      inheritAttrs: false,
      props,
      setup(props, { slots }) {
         const isMobile = ref(false);
         const isSetState = ref(false);

         const appStore = useAppStore();

         // Monitor screen breakpoint information changes
         createBreakpointListen(({ screenMap, sizeEnum, width }) => {
            const lgWidth = screenMap.get(sizeEnum.LG);
            if (lgWidth) {
               isMobile.value = width.value - 1 < lgWidth;
            }
            handleRestoreState();
         });

         const { prefixCls } = toRefs(props);

         // Inject variables into the global
         createAppProviderContext({ prefixCls, isMobile });

         /**
          * Used to maintain the state before the window changes
          */
         function handleRestoreState() {
            if (unref(isMobile)) {
               if (!unref(isSetState)) {
                  isSetState.value = true;
                  const {
                     menuSetting: {
                        type: menuType,
                        mode: menuMode,
                        collapsed: menuCollapsed,
                        split: menuSplit,
                     },
                  } = appStore.getProjectConfig;
                  appStore.setProjectConfig({
                     menuSetting: {
                        type: MenuTypeEnum.SIDEBAR,
                        mode: MenuModeEnum.INLINE,
                        split: false,
                     },
                  });
                  appStore.setBeforeMiniInfo({ menuMode, menuCollapsed, menuType, menuSplit });
               }
            } else {
               if (unref(isSetState)) {
                  isSetState.value = false;
                  const { menuMode, menuCollapsed, menuType, menuSplit } =
                     appStore.getBeforeMiniInfo;
                  appStore.setProjectConfig({
                     menuSetting: {
                        type: menuType,
                        mode: menuMode,
                        collapsed: menuCollapsed,
                        split: menuSplit,
                     },
                  });
               }
            }
         }
         return () => slots.default?.();
      },
   });
</script>
